<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="600px"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    class="payment-dialog"
    @close="handleClose"
  >
    <div class="payment-container" v-loading="loading" element-loading-text="提交支付中...">
      <!-- 支付信息卡片 -->
      <el-card class="payment-info">
        <div class="el-descriptions">
          <div class="el-descriptions__header">
            <div class="el-descriptions__title">
              <i class="el-icon-document"></i>
              支付信息
            </div>
          </div>
          <div class="el-descriptions__body">
            <el-descriptions :column="3" border>
              <el-descriptions-item label="支付单号">{{paymentInfo.orderNo}}</el-descriptions-item>
              <el-descriptions-item label="商品标题">{{paymentInfo.title}}</el-descriptions-item>
              <el-descriptions-item label="商品内容">{{paymentInfo.content}}</el-descriptions-item>
              <el-descriptions-item label="支付金额">
                <span class="amount">￥{{paymentInfo.amount}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间">{{paymentInfo.createTime}}</el-descriptions-item>
              <el-descriptions-item label="过期时间">{{paymentInfo.expireTime}}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </el-card>

      <!-- 支付方式卡片 -->
      <el-card class="payment-method">
        <div class="el-descriptions">
          <div class="el-descriptions__header">
            <div class="el-descriptions__title">
              <i class="el-icon-bank-card"></i>
              选择支付方式
            </div>
          </div>
        </div>
        <div class="pay-channel-container">
          <div 
            v-for="method in paymentMethods" 
            :key="method.id"
            :class="['payment-method-item', { active: selectedMethod === method.id }]"
            @click="selectPaymentMethod(method.id)"
          >
            <div class="method-box">
              <img :src="method.icon" :alt="method.name">
              <div class="method-title">{{method.name}}</div>
              <el-tag 
                v-if="method.tag" 
                :type="method.tagType" 
                size="mini"
                class="method-tag"
              >
                {{method.tag}}
              </el-tag>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button 
        type="primary" 
        @click="handleConfirmPayment" 
        :disabled="!selectedMethod"
        :loading="loading"
      >
        确认支付
      </el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'PaymentDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    amount: {
      type: [Number, String],
      required: true
    },
    type: {
      type: String,
      default: '充值'
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      selectedMethod: null,
      paymentInfo: {
        orderNo: '',
        title: '',
        content: '',
        amount: 0,
        createTime: '',
        expireTime: ''
      },
      paymentMethods: [
        {
          id: 'wxpay',
          name: '微信扫码支付',
          icon: '',
          tag: '推荐',
          tagType: 'success'
        },
        {
          id: 'alipay',
          name: '支付宝支付',
          icon: ''
        }
      ]
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
      if (val) {
        this.initPaymentInfo()
      }
    }
  },
  methods: {
    initPaymentInfo() {
      const now = new Date()
      const expire = new Date(now.getTime() + 30 * 60000) // 30分钟后过期
      
      this.paymentInfo = {
        orderNo: this.generateOrderNo(),
        title: `${this.type}`,
        content: `${this.type}金额：￥${this.amount}`,
        amount: this.amount,
        createTime: this.formatDate(now),
        expireTime: this.formatDate(expire)
      }
    },
    generateOrderNo() {
      return Date.now().toString() + Math.random().toString().slice(2, 8)
    },
    formatDate(date) {
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      }).replace(/\//g, '-')
    },
    selectPaymentMethod(methodId) {
      this.selectedMethod = methodId
    },
    handleConfirmPayment() {
      this.loading = true
      // TODO: 实现支付逻辑
      setTimeout(() => {
        this.loading = false
        this.$message.success('支付提交成功')
        this.$emit('update:visible', false)
      }, 1500)
    },
    async handleCancel() {
      try {
        await this.$confirm('是否放弃本次充值？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        this.$emit('update:visible', false)
      } catch {
        // 用户取消关闭
      }
    },
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.payment-dialog {
  .payment-container {
    .payment-info {
      margin-bottom: 20px;
      
      .el-descriptions__title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        
        i {
          margin-right: 8px;
          color: #409EFF;
        }
      }

      .amount {
        color: #F56C6C;
        font-size: 16px;
        font-weight: bold;
      }
    }

    .payment-method {
      .el-descriptions__title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        
        i {
          margin-right: 8px;
          color: #409EFF;
        }
      }

      .pay-channel-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;

        .payment-method-item {
          cursor: pointer;
          transition: all 0.3s;

          .method-box {
            position: relative;
            width: 200px;
            height: 80px;
            border: 1px solid #DCDFE6;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 15px;
            transition: all 0.3s;

            img {
              height: 32px;
              width: 32px;
              margin-bottom: 8px;
              object-fit: contain;
            }

            .method-title {
              font-size: 14px;
              color: #606266;
            }

            .method-tag {
              position: absolute;
              top: -10px;
              right: -10px;
            }
          }

          &:hover .method-box {
            border-color: #409EFF;
            transform: translateY(-2px);
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
          }

          &.active .method-box {
            border-color: #409EFF;
            background-color: #ecf5ff;
          }
        }
      }
    }
  }

  .dialog-footer {
    text-align: center;
  }
}

// 自定义 element-ui 样式
:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-descriptions__label) {
  width: 120px;
}
</style> 